<template>
  <div class="pools" :style="isFullscreen?{height:'100%'}:''">
    <my-header class="pools-header" v-show="!isFullscreen"/>
    <div class="header-nav" v-show="!isFullscreen">
      <div class="w">
        <ul class="nav-ul">
          <li>
            <router-link to="/pools/dashboard">{{$t('router.dashboard')}}</router-link>
          </li>
          <li>
            <router-link to="/pools/mill">{{$t('router.mill')}}</router-link>
          </li>
          <li>
            <router-link to="/pools/income">{{$t('router.income')}}</router-link>
          </li>
          <li v-if="subCoinType === 'btc' || subCoinType === 'dcr' || subCoinType === 'bch' || subCoinType === 'bsv' || subCoinType === 'zec'">
            <router-link to="/pools/payhistory">{{$t('router.payhistory')}}</router-link>
          </li>
        </ul>
      </div>
    </div>
    <router-view/>
    <my-footer v-show="!isFullscreen" />
  </div>
</template>
<script>
import myHeader from '@/components/Header';
import myFooter from '@/components/Footer';
import { mapGetters } from 'vuex';

export default {
  name: 'pools',
  components: { myHeader, myFooter },
  computed: {
    ...mapGetters(['isFullscreen', 'subCoinType']),
  },
};
</script>
<style lang="scss" scoped>
.pools {
  .pools-header {
    border-bottom: none;
  }
  .header-nav {
    min-width: 1200px;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
    border-bottom: solid 1px #e0e0e0;
    background-color: #fff;
    .nav-ul {
      display: flex;
      li {
        flex: 1;
        text-align: center;
        a {
          position: relative;
          display: block;
          line-height: 40px;
          height: 40px;
          font-size: 14px;
          color: #333333;
          &.router-link-active,&:hover {
            &::after {
              display: block;
              content: " ";
              position: absolute;
              bottom: -1px;
              left: 0;
              height: 2px;
              width: 100%;
              background-color: #70c1b3;
            }
          }
        }
      }
    }
  }
}
</style>

